<!--输入验证码，进行第一次验证-->
<template>
  <div>
    <el-dialog title="请输入验证码" :visible="visible" width="30%" @close="close">
        <span slot="footer" class="dialog-footer">
        <el-button @click="close(false)">取 消</el-button>
        <el-button type="primary" @click="verifyCode()">确 定</el-button>
        <a @click="canNotUsePhone1">无法使用这个号码</a>
      </span>
        <el-input v-model="inputCode">
          <template slot="append">
            <el-button v-if="isButtonDisabled":disabled="isClickButton" @click="disableButtonAndShowSpinner">
              <span v-if="isClickButton">
                {{countdown}}秒后再次获取
              </span>
              <span v-else>
                  发送验证码
              </span>
            </el-button>
          </template>
        </el-input>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name:'VerifyCaptchaDialog',
  props: {
    phone1:{
      type:String,
      default:'',
      required: true
    },
    isPhone:{
      type:Boolean,
      default:true,
    },
    phone2:{
      type:String,
      default:'',
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    onVerifySuccess: {
      type: Function,
      default: () => {

      }
    },
  },
  data() {
    return {
      isPhone1NotUse:this.isPhone,
      inputCode: null,
      localVisible: this.visible,
      sendCode:null,
      isButtonDisabled: true, //判断展示‘获取验证码’或‘倒计时’
      isClickButton: false, //是否点击获取验证码按钮
      count: "", //倒计时时间
      countdown: 0, // 剩余秒数
      countdownInterval: null, // 存储setInterval的ID，以便可以清除它
      isSuccess:false
    };
  },
  methods: {
    verifyCode() {
      // 验证验证码
     if (this.inputCode!=null||this.inputCode!=''){
       this.$axios.get("/web/verifyCaptcha",{params:{captcha:this.sendCode,inputCode:this.inputCode}}).then(res=>{
         if(res.data.data==true){
           this.$message.success("验证成功");
           this.isSuccess=true
           this.close()
         }else{
           this.$message.error("验证失败")
           this.isSuccess=false
           this.close()
         }
       });
     }else{
       this.$message.error("验证码错误")
       this.close()
     }
    },
    close() {
      this.localVisible = false;
      this.$emit('update:visible', this.localVisible);
      this.$emit("verify-success",this.isSuccess);
    },
    send(){
      if (this.isPhone=true){
        this.axios.get('web/sendCode', {params: {phone: this.phone1}}).then(res => {
          this.$message.success('发送成功');
          this.sendCode = res.data.code;
        });
      }
      else{
        this.axios.get('web/sendCode', {params:{phone:this.phone2}}).then(res=>{
          this.$message.success('发送成功');
          this.sendCode = res.data.code;
        });
      }
    },
    canNotUsePhone1(){
     if (this.isPhone = true){
       this.axios.get('web/sendCode', {params:{phone:this.phone2}}).then(res=>{
         this.$message.success('发送成功');
         this.sendCode = res.data.code;
       });
     }
     else{
       this.axios.get('web/sendCode', {params: {phone: this.phone1}}).then(res => {
         this.$message.success('发送成功');
         this.sendCode = res.data.code;
       });
     }
    },
    disableButtonAndShowSpinner(){
      this.dialogVisible=true;
      this.isClickButton=true;
      this.countdown = 60;
      this.countdownInterval = setInterval(() => {
        if(this.countdown > 0){
          this.countdown--;
        }else{
          clearInterval(this.countdownInterval);
          this.isClickButton=false;
          this.countdown=0;
        }
      },1000)
      this.send();
    },
  },

};
</script>